<template>
  <view
    class="u-notice-bar"
    v-if="show"
    :style="[
      {
        backgroundColor: bgColor
      },
      $u.addStyle(customStyle)
    ]"
  >
    <template v-if="direction === 'column' || (direction === 'row' && step)">
      <u-column-notice
        :color="color"
        :bgColor="bgColor"
        :icon-color="iconColor"
        :text="text"
        :mode="mode"
        :step="step"
        :icon="icon"
        :rightIconColor="rightIconColor"
        :disable-touch="disableTouch"
        :fontSize="fontSize"
        :duration="duration"
        @close="close"
        @click="click"
      ></u-column-notice>
    </template>
    <template v-else>
      <u-row-notice
        :color="color"
        :icon-color="iconColor"
        :bgColor="bgColor"
        :text="text"
        :mode="mode"
        :fontSize="fontSize"
        :speed="speed"
        :url="url"
        :rightIconColor="rightIconColor"
        :linkType="linkType"
        :icon="icon"
        @close="close"
        @click="click"
      ></u-row-notice>
    </template>
  </view>
</template>
<script>
import props from "./props.js"

/**
 * noticeBar 滚动通知
 * @description 该组件用于滚动通告场景，有多种模式可供选择
 * @tutorial https://www.uviewui.com/components/noticeBar.html
 * @property {Array | String}	text			显示的内容，数组
 * @property {String}			direction		通告滚动模式，row-横向滚动，column-竖向滚动 ( 默认 'row' )
 * @property {Boolean}			step			direction = row时，是否使用步进形式滚动  ( 默认 false )
 * @property {String}			icon			是否显示左侧的音量图标 ( 默认 'volume' )
 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
 * @property {String}			color			文字颜色，各图标也会使用文字颜色 ( 默认 '#f9ae3d' )（ps:iocn使用）
 * @property {String}			bgColor			背景颜色 ( 默认 '#fdf6ec' )
 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(px)，这有利于控制文字无论多少时，都能有一个恒定的速度 ( 默认 80 )
 * @property {String | Number}	fontSize		字体大小 ( 默认 14 )
 * @property {String | Number}	duration		滚动一个周期的时间长，单位ms ( 默认 2000 )
 * @property {Boolean}			disableTouch	是否禁止用手滑动切换 目前HX2.6.11，只支持App 2.5.5+、H5 2.5.5+、支付宝小程序、字节跳动小程序（默认34） ( 默认 true )
 * @property {String}			url				跳转的页面路径
 * @property {String}			linkType		页面跳转的类型 ( 默认 navigateTo )
 * @property {Object}			customStyle		定义需要用到的外部样式
 * @property {string}     iconColor   icon颜色
 * @event {Function}			click			点击通告文字触发
 * @event {Function}			close			点击右侧关闭图标触发
 * @example <u-notice-bar :more-icon="true" :list="list"></u-notice-bar>
 */
export default {
  name: "u-notice-bar",
  mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
  data() {
    return {
      show: true
    }
  },
  methods: {
    // 点击通告栏
    click(index) {
      this.$emit("click", index)
      if (this.url && this.linkType) {
        // 此方法写在mixin中，另外跳转的url和linkType参数也在mixin的props中
        this.openPage()
      }
    },
    // 点击关闭按钮
    close() {
      this.show = false
      this.$emit("close")
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";

.u-notice-bar {
  overflow: hidden;
  padding: 9px 12px;
  flex: 1;
}
</style>
